<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字阴影</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
    h1 {
        font-weight: 700;
        font-size: 50px;
        color: #fff;
    }

    h1::before {
        content: attr(data-attr);
        position: absolute;
        color: #000;
        transform: translate(-20px, 7px) scaleY(0.8) skew(50deg);
        z-index: -1;
        filter: blur(1px);
        -webkit-mask-image: linear-gradient(transparent, #000);
        mask-image: linear-gradient(transparent, #000);
    }
</style>

<body>
    <h1 data-attr="susu is xiaosusu">susu is xiaosusu</h1>
</body>

</html>